<template>
    <van-nav-bar title="提现" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="withdrawal">
        <div class="withdrawal_form">
            <div class="balance">
                <h5 v-if="AmountType == 1"> {{ MemberExt.Wallet3 || 0 }} </h5>
                <h5 v-else> {{ MemberExt.Wallet4 || 0 }} </h5>
                <p> 当前可提现积分 </p>
            </div>
            <div class="form_submit">
                <van-field name="radio" label="提现类型">
                    <template #input>
                        <van-radio-group v-model="AmountType" direction="horizontal">
                            <van-radio name="1"> 解冻积分 </van-radio>
                            <van-radio name="2"> 团队积分 </van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="Amount" label="本次提现金额" input-align="right" type="number" placeholder="请输入提现金额"
                    v-model="Amount" />
                <van-field name="OBackUserName" label="收款人姓名" label-width="120" input-align="right" placeholder="请输入收款银行"
                    v-model="OBackUserName" />
                <van-field name="OBackName" label="收款银行" label-width="120" input-align="right" placeholder="请输入收款银行"
                    v-model="OBackName" />
                <van-field name="OAccount" label="收款账号" label-width="120" input-align="right" placeholder="请输入收款账号"
                    v-model="OAccount" />
                <van-field name="OpeningBranch" label="收款支行" label-width="120" input-align="right" placeholder="请输入收款支行"
                    v-model="OpeningBranch" />

                <van-field name="Security" label="交易密码" type="password" input-align="right" placeholder="请输入交易密码"
                    v-model="Security" />
            </div>
            <div class="form_btn">
                <van-button block type="primary" native-type="submit" class="btn1" @click="AddCashOrderSubmit()"> 提现
                </van-button>
            </div>
            <div class="form_tishi">
                <p> 提示：提现操作限于工作日 9:00 -17:00，谢谢！ </p>
                <p> 积分提现扣除15%的手续费和 15% 的固定消费积分 </p>
            </div>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="CashOrderList.length > 0 ? '已经到底了哦' : ''"
            @load="onLoad">
            <div class="withdrawal_list">
                <div class="titel"> 提现记录 </div>
                <div class="list" v-if="CashOrderList.length > 0">
                    <div class="int" :key="index" v-for="(Item, index) in CashOrderList">
                        <div class="with_a">
                            <div class="lf"> 提现时间：{{ Item.CreateTime }} </div>
                            <div class="rt"> {{ filters(Item.State) }}</div>
                        </div>
                        <div class="with_a">
                            <div class="lf"> 提现金额：{{ Item.Amount }}元 </div>
                        </div>
                    </div>
                </div>
                <div class="vanEmpty" v-else>
                    <van-empty image-size="100px" description="暂无数据" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { Dialog } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import router from "@/router";
import { GetCashOrderList, AddCashOrder } from "@/network/Capital";
import { GetMemberExt } from "@/network/user";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const route = useRoute();
        const { type } = route.query;
        const state = reactive({
            token: store.state.user.token,
            type: type,
            CashOrderList: [],
            Security: '',//安全密码
            Amount: 0,//  提现积分
            AmountType: '1',//1 解冻积分 2 团队积分 ,
            OBackUserName: '',//收款人姓名
            OBackName: '',//收款\打款银行 
            OAccount: '',// 收款\打款账号 ,
            OpeningBranch: '',//收款\打款支行
            PayAccount: '',
            RealName: '',
            Remark: '',
            loading: false,
            finished: false,
            pageSize: 5,
            currentPage: 1,
            Total: 0,
            MemberExt: {},
        });
        onMounted(() => {
            if (state.type) {
                state.AmountType = (state.type + '') || '1';
            }
            getUser()
            init();
            init_MemberExt();
        });

        //提现
        const AddCashOrderSubmit = () => {
            console.log(state.Amount)
            if (state.Amount < 0 || state.Amount == 0) {
                Notify({ type: 'warning', message: '提现金额必须大于0' });
                return false
            }
            if (state.AmountType == 1) {
                if (state.Amount > state.token.Wallet3) {
                    Notify({ type: 'warning', message: '提现金额不能大于可提现余额' });
                    return false
                }
            }
            if (state.AmountType == 2) {
                if (state.Amount > state.token.Wallet4) {
                    Notify({ type: 'warning', message: '提现金额不能大于可提现余额' });
                    return false
                }
            }
            if (!state.OBackUserName) {
                Notify({ type: 'warning', message: '请输入收款人姓名' });
                return false
            }
            if (!state.OBackName) {
                Notify({ type: 'warning', message: '请输入收款银行名称' });
                return false
            }
            if (!state.OAccount) {
                Notify({ type: 'warning', message: '请输入收款账号' });
                return false
            }
            if (!state.OpeningBranch) {
                Notify({ type: 'warning', message: '请输入收款支行名称' });
                return false
            }
            if (!state.Security) {
                Notify({ type: 'warning', message: '请输入交易密码' });
                return false
            }
            Dialog.confirm({
                title: '标题',
                message: '提现将扣除15%手续费及转存15%固定消费积分，实际到账' + (state.Amount * 0.7),
            }).then(() => {
                const toast = Toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '正在提现中...',
                });
                var params = {
                    MemberId: state.token.ID,
                    Amount: state.Amount,
                    AmountType: state.AmountType,
                    OBackUserName: state.OBackUserName,
                    OBackName: state.OBackName,
                    OAccount: state.OAccount,
                    OpeningBranch: state.OpeningBranch,
                    Security: state.Security,
                    Remark: state.Remark,
                }
                AddCashOrder(params).then((res) => {
                    if (res.Code == 0) {
                        init();
                        Dialog.alert({
                            title: '提示',
                            message: '提现成功，请注意账号到账情况！',
                            confirmButtonColor: '#73D56C',
                            theme: 'round-button',
                        }).then(() => { });
                        var params = {
                            ID: state.token.ID,
                            OBackUserName: state.OBackUserName,
                            OBackName: state.OBackName,
                            OAccount: state.OAccount,
                            OpeningBranch: state.OpeningBranch
                        }
                        // 修改用户信息
                        store.dispatch("UpdateUser", params).then((res) => {
                            getUser()
                        }).catch(() => { });
                    } else {
                        Dialog.alert({
                            title: '提示',
                            confirmButtonColor: '#E46E6E',
                            message: res.Message + '！',
                            theme: 'round-button',
                        }).then(() => { });
                    }
                    init_MemberExt();
                    state.Amount = 0;
                    state.Security = '';
                    toast.clear()
                });


            }).catch(() => {
                // on cancel
            });

        };
        const onLoad = () => {
            if (state.CashOrderList.length == state.Total) {
                if (state.CashOrderList.length != 0) {
                    state.loading = false
                    state.finished = true
                }
            } else {
                state.currentPage = parseInt(state.currentPage) + 1;
                init();
            }
        }
        // 初始化信息
        const init = () => {
            var params = {
                memberId: state.token.ID,
                pageSize: state.pageSize,
                currentPage: state.currentPage
            }
            GetCashOrderList(params).then((res) => {
                if (res.Code == 0) {
                    var data = res.Data;
                    state.Total = res.Pager.Total
                    if (data.length > 0) {
                        data.forEach(element => {
                            state.CashOrderList.push(element)
                        });
                    } else {
                        state.finished = true
                    }
                } else { }
            });
        };
        //获取用户信息 更新余额
        const init_MemberExt = () => {
            // 获取扩展信息
            GetMemberExt({
                Id: state.token.ID
            }).then((res) => {
                if (res.Code == 0) {
                    var data = res.Data;
                    state.MemberExt = data
                }
            });
        }
        //获取用户信息
        const getUser = () => {
            store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                state.token = res.Data
                state.OBackUserName = res.Data.OBackUserName;//收款人姓名
                state.OBackName = res.Data.OBackName//收款\打款银行 
                state.OAccount = res.Data.OAccount// 收款\打款账号 ,
                state.OpeningBranch = res.Data.OpeningBranch//收款\打款支行
            }).catch(() => { });
        }
        //过滤器
        function filters(id) {
            let txt = "";
            switch (id) {
                case 1:
                    txt = "待审核";
                    break;
                case 2:
                    txt = "审核失败";
                    break;
                case 4:
                    txt = "审核成功";
                    break;
                case 8:
                    txt = "提现完成";
                    break;
                case -1:
                    txt = "提现失败";
                    break;
            }
            return txt;
        }
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),
            getUser,
            init_MemberExt,
            onClickLeft,
            AddCashOrderSubmit,
            filters,
            onLoad,
        };
    },
};
</script>

<style scoped></style>